<div class="auth-container">
  <div class="card auth-card">
    <div class="card-body">
      <h2 class="text-center mb-4">注册新账号</h2>

      <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" class="form-control"
                 formControlName="username"
                 [ngClass]="{ 'is-invalid': submitted && username.invalid }">
          <div *ngIf="submitted && username.invalid" class="invalid-feedback">
            <div *ngIf="username.hasError('required')">用户名不能为空</div>
            <div *ngIf="username.hasError('minlength')">用户名至少需要3个字符</div>
          </div>
        </div>

        <div class="form-group">
          <label for="email">电子邮箱</label>
          <input type="email" id="email" class="form-control"
                 formControlName="email"
                 [ngClass]="{ 'is-invalid': submitted && email.invalid }">
          <div *ngIf="submitted && email.invalid" class="invalid-feedback">
            <div *ngIf="email.hasError('required')">邮箱不能为空</div>
            <div *ngIf="email.hasError('email')">请输入有效的邮箱地址</div>
          </div>
        </div>

        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" class="form-control"
                 formControlName="password"
                 [ngClass]="{ 'is-invalid': submitted && password.invalid }">
          <div *ngIf="submitted && password.invalid" class="invalid-feedback">
            <div *ngIf="password.hasError('required')">密码不能为空</div>
            <div *ngIf="password.hasError('minlength')">密码至少需要6个字符</div>
          </div>
        </div>

        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input type="password" id="confirmPassword" class="form-control"
                 formControlName="confirmPassword"
                 [ngClass]="{ 'is-invalid': submitted && confirmPassword.invalid }">
          <div *ngIf="submitted && confirmPassword.invalid" class="invalid-feedback">
            <div *ngIf="confirmPassword.hasError('required')">请确认密码</div>
            <div *ngIf="confirmPassword.hasError('mustMatch')">密码不匹配</div>
          </div>
        </div>

        <button type="submit" class="btn btn-primary btn-block" [disabled]="loading">
          <span *ngIf="!loading">注册</span>
          <span *ngIf="loading" class="spinner-border spinner-border-sm"></span>
        </button>
      </form>

      <div class="text-center mt-3">
        <a routerLink="/login">已有账号？立即登录</a>
      </div>
    </div>
  </div>
</div>
